import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';

const InfoNormalItem = ({ title, children, height }) => (
  <View style={[styles.InfoNormalItemBox, { height }]}>
    <Text style={styles.itemTitle}>{title}</Text>
    {children}
  </View>
);

InfoNormalItem.propTypes = {
  height: PropTypes.number,
  title: PropTypes.string.isRequired,
  children: PropTypes.element.isRequired,
};

InfoNormalItem.defaultProps = {
  height: px2dp(100),
};

const styles = StyleSheet.create({
  InfoNormalItemBox: {
    paddingHorizontal: px2dp(30),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    // borderWidth: StyleSheet.hairlineWidth,
    // borderColor: colors['1104'],
    backgroundColor: colors.white,
  },
  itemTitle: {
    fontSize: sizes.f3,
    color: colors['1101'],
  },
});

export { InfoNormalItem };
